@import "./sass/_variable.scss";
@import "./sass/_base.scss";

#patrol-list {
  padding: $emptyWidth;
  .patrol-item {
    position: relative;
    @include liWrap;
    &:last-of-type .patrol-records-head:after {
      display: none;
    }
    &:after {
      content: " ";
      position: absolute;
      left: 0;
      top: 0;
      width: 200%;
      height: 200%;
      border: 1px solid #D9D9D9;
      color: #D9D9D9;
      -webkit-transform-origin: left top;
      transform-origin: left top;
      -webkit-transform: scale(0.5);
      transform: scale(0.5);
    }
  }
  .patrol-item.current {
    margin-bottom: $emptyWidth;
    .patrol-records-head {
      background-color: #eefbf2;
      &:after {
        display: block;
      }
    }
    .patrol-records-body {
      height: auto;
      visibility: visible;
      -webkit-transition: all 1s ease-out;
      -ms-transition: all 1s ease-out;
      transition: all 1s ease-out;
    }
  }
  .patrol-records-head {
    @include liHead($white);
    @extend .pos_r;
    &:after {
      @include scaleBottom;
    }
    &.good {
      background: url("../images/icon_good.png") no-repeat $emptyWidth center;
      background-size: 32rem / $baseFontSize;
    }
    &.bad {
      background: url("../images/icon_bad.png") no-repeat $emptyWidth center;
      background-size: 32rem / $baseFontSize;
    }
    overflow: hidden;
    time {
      @extend .fl_left;
      @extend .vm;
      margin-left: 56rem / $baseFontSize;
    }
    span {
      @extend .fl_right;
      @extend .vm;
      margin-right: 15rem / $baseFontSize;
      color: #7b7b7b;
    }
  }
  .patrol-records-body {
    height: 0;
    visibility: hidden;
    li {
      @extend .pos_r;
      padding: 15rem / $baseFontSize;
      padding-left: 0;
      &:not(:last-of-type):after {
        @include scaleBottom;
        left: 50rem / $baseFontSize;
      }
    }
    h3 {
      @extend .ft16;
      font-weight: normal;
      color: $mainColor;
      line-height: 1.4;
      margin-bottom: 4px;
      padding-left: 50rem / $baseFontSize;
      background: no-repeat 20rem/$baseFontSize center;
      background-size: 16rem/$baseFontSize;
    }
    .limitation {
      background-image: url("../images/icon_mistake.png");
    }
    .advantage {
      background-image: url('../images/icon_correct.png');
    }
    .summarize {
      background-image: url('../images/icon_summarize.png');
    }
    .resultcheck{
      padding-left: 2rem;
      i{
        color: green;
        margin-right: 1.6rem;
      }
    }
    p {
      @extend .ft16;
      color: #7b7b7b;
      line-height: 1.4;
      padding-left: 50rem / $baseFontSize;
      text-align: justify;
    }
  }
}
